<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>追加入库</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/product.css">
	<link rel="stylesheet" href="css/select-big.css">
	<link rel="stylesheet" href = "css/fuzzy-query.css">
	<style>
		.content-btn {
		    margin: 0 16px;
		}
		.chooseAdd .chooseSelect{
			width: 338px;
			appearance:none;
			-moz-appearance:none;
			-webkit-appearance:none;
			background: url(images/select-big-down.png) no-repeat scroll right center transparent;
			padding-left: 12px;
			box-sizing: border-box;
		}
		.chooseAdd .chooseSelect option{
			line-height:30px;
		}
		.chooseAdd .chooseInput{
			width: 100px;
		}
		.icon-delImg{
			display: inline-block;
		    background: url(images/close-1.png)no-repeat;
		    width: 25px;
		    height: 25px;
		    vertical-align: middle;
		    cursor: pointer;
		}
		.icon-delImg:hover{
			background: url(images/close-1.png)no-repeat 0 -27px;
		}
		.icon-addImg{
			display: inline-block;
		    background: url(images/open-1.png)no-repeat;
		    width: 25px;
		    height: 25px;
		    vertical-align: middle;
		    cursor: pointer;
		}
		.icon-addImg:hover{
			background: url(images/open-1.png)no-repeat 0 -27px;
		}
	</style>
</head>
<body>
	<div class="main-content">
		<div class="main-bg1">
			<div class="content-btn bot-line">
				<a class="icon-back" href="contractEntry.html"></a><span class="title-info-a">入库项目</span>
			</div>
			<form dataHref = "/contractInbound/save">
				<input type = "hidden" name = "id" />
				<table class="content-table-newservice" cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td><span class="info-red"><font color="red">*</font>项目名称：</span></td>
							<td>
								<div id = "div" class = "fuzzy-query" dataUrl = "/project/find" dataname = "projectname" datavalue = "projectcode" lablename = "projectFullName" valuename = "projectId"></div>
							</td>
						</tr>
						<tr class="chooseAdd">
							<td>
								<span class="info-red"><font color="red">*</font>印刷厂：</span>
							</td>
							<td>
								<select class="chooseSelect" name = "prints[0]">
									<option value="0">请选择</option>
									<option value="1">杭州印刷厂</option>
									<option value="2">廊坊印刷厂</option>
									<option value="3">总部发放</option>
								</select>
								<input class="chooseInput" type="text" name = "numbers[0]" placeholder="入库数量">
							</td>
						</tr>
						<tr class="chooseAdd">
							<td>
								<span class="info-red"><font color="red">*</font>印刷厂：</span>
							</td>
							<td>
								<select class="chooseSelect" name = "prints[1]">
									<option value="0">请选择</option>
									<option value="1">杭州印刷厂</option>
									<option value="2">廊坊印刷厂</option>
									<option value="3">总部发放</option>
								</select>
								<input class="chooseInput" type="text" name = "numbers[1]" placeholder="入库数量">
								<i class="icon-addImg" onclick="add(this)"></i>
								<i class="icon-delImg" onclick="del(this)"></i>
							</td>
						</tr>
						<tr>
							<td><span class="info-red"><font color="red">*</font>一式几份：</span></td>
							<td><select name = "type" id="single2">
								<option value = "0">一式二份</option>
								<option value = "1">一式三份</option>
								<option value = "2">一式四份</option>
								<option value = "3">一式五份</option>
								<option value = "4">其他</option>
							</select></td>
						</tr>
						<tr>
							<td>描述：</td>
							<td><textarea id="" cols="30" rows="3" name = "remark"></textarea></td>
						</tr>
						<tr>
							<td></td>
							<td>
								<button class="save-btn">保存</button>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
	</div>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
	<script src="js/select.jquery.js"></script>
	<script type="text/javascript" src = "js/util.js"></script>
	<script type="text/javascript" src = "js/submit.js"></script>
	<script type="text/javascript" src = "js/validate.js"></script>
	<script>
		var data = parent.data;
		$(document).ready(function(){
			if(data){
				$("input[name='id']").val(data.id);
				var $div = $("#div");
				var parent = $div.parent();
				var name = $div.attr("name")?$div.attr("name"):$div.attr("dataname");
				parent.empty();
				parent.append("<input type=\"text\" readonly = 'true' name = \"" + name + "\" value = '" + data[name] + "'>");
				$("#single2").val(data.type);
    			$("#single2").change(function(){
    				layer.msg("合同类型不能改变");
    				$("#single2").val(data.type);
    			})
			}else{
				loadJs("js/fuzzy-query.js");
			}
		})
		function add(my){
			var $this = $(my);
			var html_del = "<i class=\"icon-delImg\" onclick=\"del(this)\"></i>";
			var html_add = "<i class=\"icon-addImg\" onclick=\"add(this)\"></i>";
			var html = "<tr class=\"chooseAdd\">" + $this.parent().parent().html() + "</tr >";
			$this.parent().parent().after(html);
			var index = $("table").find(".chooseAdd").length - 1;
			var $tr = $this.parent().parent().next();
			$tr.find("select").attr("name","prints[" + index + "]");
			$tr.find("input.chooseInput").attr("name","numbers[" + index + "]");
			if(index == 2){
				$this.parent().parent().next().find("td").eq(1).find("i").eq(0).remove();
			}else{
				$this.parent().parent().next().find("td").eq(1).append(html_del);
			}
			$this.parent().find("i").remove();
		}
		function del(my){
			var index = $("table").find(".chooseAdd").length - 1;
			var $this = $(my);
			var html_del = "<i class=\"icon-delImg\" onclick=\"del(this)\"></i>";
			var html_add = "<i class=\"icon-addImg\" onclick=\"add(this)\"></i>";
			$this.parent().parent().prev().find("td").eq(1).append(html_add);
			if(index == 2){
				$this.parent().parent().prev().find("td").eq(1).append(html_del);
			}
			$this.parent().parent().remove();
		}
		function submitCallback(dt){
			layer.msg('操作成功！');
			parent.goUrl("contractEntry.html");
		}
		function validateCallback(){
			var bo = true;
			if(!$("#div").getVal()){
				parent.layer.msg("请选择部门");
				return false;
			}
			$.each($(".chooseSelect"),function(){
				var $this = $(this);
				if($this.val() == "0"){
					parent.layer.msg("请选择印刷厂");
					bo = false;
				}
			})
			if(bo){
				$.each($(".chooseInput"),function(){
					var $this = $(this);
					if(!$this.val()){
						parent.layer.msg("请输入入库数量");
						bo = false;
					}
				})
			}
			return bo;
		}
	</script>
	<!-- <script type="text/javascript" src = "js/fuzzy-query.js"></script> -->
</body>
</html>